<template>
  <div class='articles-container'>
    <el-card class="first-card">
      <!-- 面包屑导航 -->
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 分割线 -->
        <!-- <el-divider></el-divider> -->
      </div>
      <!-- 控制面板 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="状态" style="text-align: left">
          <el-radio-group v-model="form.radio">
            <el-radio label="全部"></el-radio>
            <el-radio label="草稿"></el-radio>
            <el-radio label="待审核"></el-radio>
            <el-radio label="审核通过"></el-radio>
            <el-radio label="审核失败"></el-radio>
            <el-radio label="已移除"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道" style="text-align: left">
          <el-select v-model="form.region" placeholder="请选择频道">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" style="text-align: left">
          <el-date-picker
            v-model="form.value1"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
         <el-time-picker
            is-range
            v-model="form.value"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            style="margin-left: 10px">
          </el-time-picker>
        </el-form-item>
        <el-form-item style="text-align: left">
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 数据展示面板 -->
    <!-- <i class="iconfont icon-neirong"></i> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        根据筛选条件共查询到77777条结果：
      </div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        class="list-table"
        size="mini"
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        radio: 1,
        region: '',
        value1: '',
        value: ''
      }, 
      tableData: []
    }
  },
  created () {},
  methods: {
    onSubmit () {
      console.log('sumbit')
    }
  }
}
</script>

<style lang='less' scoped>
.first-card {
  margin-bottom: 30px;
}
.list-table {
  margin-bottom: 20px;
}
</style>
